<template>
	<div>
		<mu-card-media >
          <img id="index-img" style="width: 100%;" :src="indexBg" />
       </mu-card-media>
		<div class="class-list" >
        		<section class="left-nav">
        			<span>
        				<a>{{teachDateInfo.academic}}</a>
        				<a>第{{teachDateInfo.semester}}学期</a>
        			</span>
        			<span>
        				<a style="color: #2799f3;font-size: 1rem;">{{teachDateInfo.weekDay}}</a>
        				<!--<a style="color: #d7d7d7;font-size: 0.8rem"></a>-->
        				<!--<a>{{currentYear}}</a>-->
        				<a>{{teachDateInfo.month}}</a>
        			</span>
        			<span>
        				<a>教学周</a>
        				<a>第{{teachDateInfo.teachWeek}}周</a>
        			</span>
        		</section>
       			        		<section class="right-content" >
        			<swiper :options="swiperOption" class="swiper-box">
					 	<swiper-slide v-if="todayCourse.length==0" class="swiper-item add-style">
							<section class="slide-sec">
					    		<mu-icon class="new-icon"  value="description" color="blue" />
					    		<span>暂无课程</span>
					    	</section>
					    </swiper-slide>
					    <swiper-slide v-for="item in todayCourse" class="swiper-item add-style">
					    	<section class="slide-sec">
					    		<mu-icon class="new-icon"  value="description" color="blue" />
					    		<!--<span>{{item.DJJ+'-'+(parseInt(item.DJJ)+parseInt(item.SKCD)-1)}}节</span>-->
					    		<span>{{item.courseWhichIndex+'-'+(parseInt(item.courseWhichIndex)+1)}}节</span>
					    	</section>
					    	<section class="slide-sec">
					    		<mu-icon class="new-icon"  value="receipt" color="blueGrey500" />
					    		<span>
					    			{{fitWidth(item.courseName)}}
					    			<a @click="open(item.courseName,'课程详情')" class="click-ellipsis"  v-show="btnDetail(fitWidth(item.courseName))"></a>
				    				<mu-dialog :open="dialog" title="课程详情">
				    					{{detailInfo}}
								    	<mu-flat-button label="确定" slot="actions" primary @click="close"/>
								    </mu-dialog>
					    		</span>
					    		
					    	</section>
					    	<section class="slide-sec">
					    		<mu-icon class="new-icon"  value="room" color="green500" />
					    		<!--<span>{{(item.course_classroom_position.length>7)?(item.course_classroom_position.slice(0,7)+'...'):item.course_classroom_position}}</span>-->
					    		<span>
					    			{{fitWidth(item.courseClassroomPosition.length==0?'上课地点另行通知':item.courseClassroomPosition)}}
					    			<a @click="open(item.courseClassroomPosition,'上课地点')" class="click-ellipsis"  v-show="btnDetail(fitWidth(item.courseClassroomPosition))"></a>
				    				<mu-dialog :open="dialog2" title="上课地点">
				    					{{detailInfo}}
								    	<mu-flat-button label="确定" slot="actions" primary @click="close"/>
								    </mu-dialog>
					    		</span>
					    	</section>
					    	<section class="slide-sec">
					    		<mu-icon class="new-icon"  value="perm_identity" color="orange700" />
					    		<span>{{item.courseTeacherName}}</span>
					    	</section>
					    </swiper-slide>
					    <div class="swiper-pagination" slot="pagination"></div>
					  </swiper>
        		</section>
		</div>
    
	         <div class="module-container" style="margin-top: 0.5rem;">
	         	<mu-flat-button v-if="item.type=='3'" class="item-gird"  @click="gotoAddress({path:item.url})" v-for="item in menuList">
        	   		<section class="btn-sec">
        	   			<mu-icon :color="item.color" :size="26" :value="item.icon"/>
        	   			<span>{{item.name}}</span>
        	   			<!--<section  class="IndexCorner" >{{unSubCount(item)}}</section>-->
        	   		</section>
        	   </mu-flat-button>
	         </div>
	         
	                 <section style="width: 100%; display: flex; flex-direction: row;align-items: center; background-color: #fff; margin-top: 0.8rem;">
        	
       		<mu-flat-button style="width:100%; height: auto; " @click="gotoAddress({path:showNews.length==0?'index':'tzzx'})">
       			
       			<mu-icon  value="notifications_none" color="#2799f3" :size="50" style="width:25%; text-align: center;"/>
	        	<ul  class="mid-ul-content" >
	       			<li  class="line-message" v-for="(item,index) in showNews">
	       				<span >{{item.schoolAnnouncementTitle}}</span>
	       				<!--<aside class="when-prop" >23小时前</aside>-->
	       			</li>
	       			<li v-if="showNews.length==0" style="text-align: left;">
	       				暂无最新消息
	       			</li>
	       		</ul>
	       		<section style="width: 10%;"></section>
    	   		<section style="width: 10%;">
    	   			<!--<mu-icon color="green500" :size="26" value="class"/>-->
    	   			<mu-icon  value="keyboard_arrow_right"/>
    	   		</section>
    	   </mu-flat-button>
        </section>
	  	<mu-card-media id="card-img"  style=" opacity: 0.4;">
          <img style="width: 100%;"  :src="botBg"/>
        </mu-card-media> 
        
	    <!--<div v-show="isToCourse||isPublic||isAnnounce" class="" style="width: 100%;height: 100%; position:fixed;left:0;top:0;background-color: rgba(0,0,0,0.1);display: flex;justify-content: center;align-items: center;z-index: 350;">
			<mu-circular-progress :size="24" color="green500"/>
		</div>-->
	         
	
	</div>   
</template>

<script>
export default {	
	data(){
		return{
			indexBg:'static/images/indexBg2.png',
			botBg:'static/images/appbg2.0.png',
			dialog: false,//课堂详情
		    dialog2:false,//上课地点
		    detailInfo:'',//弹出框内容
//			teachDateInfo:{
//		    	academic:'',
//		    	semester:'',
//		    	teachWeek:'',
//		    	weekDay:'',
//		    	month:'',
//		    	
//		    },
		    swiperOption: {
	          pagination: '.swiper-pagination',
	          direction: 'horizontal',
	          slidesPerView: 1,
	          paginationClickable: true,
	          spaceBetween: 0,
	          mousewheelControl: true,
	          paginationType: 'custom',
	          slidesPerGroup: 1
	        },
//			todayCourse:[],
//			menuList:[],
			showNews:{},
			isToCourse:true,
		    isPublic:true,
		    isAnnounce:true,
		}
	},

	mounted(){
		this.loadMessage()
  	},
  	computed:{
		showNewsUrl(){
			return `${localStorage.schoolUrl}/announce/SelectFew?count=2`
		},
	    teachDateInfo(){
			return  this.$store.state.teachDateInfo
		},
		todayCourse(){
			return  this.$store.state.todayCourse
		},
		menuList(){
			return this.$store.state.MenuList
		}
	},
  	methods:{
  		fitWidth(data){//判定字符串长短，是否隐藏
      	 var scrWidth=document.body.offsetWidth
      	 if(scrWidth>310&&scrWidth<330){
      	 	var thisData=data.length>9?(data.slice(0,9)+'...'):data
      	 }else if(scrWidth>=330&&scrWidth<370){
      	 	var thisData=data.length>11?(data.slice(0,11)+'...'):data
      	 }else if(scrWidth>=370&&scrWidth<400){
      	 	var thisData=data.length>14?(data.slice(0,14)+'...'):data
      	 }else if(scrWidth<=310){
      	 	var thisData=data.length>7?(data.slice(0,7)+'...'):data
      	 }else if(scrWidth>=400&&scrWidth<430){
      	 	var thisData=data.length>17?(data.slice(0,17)+'...'):data
      	 }else if(scrWidth>=400&&scrWidth<470){
      	 	var thisData=data.length>20?(data.slice(0,20)+'...'):data
      	 }else if(scrWidth>=470&&scrWidth<500){
      	 	var thisData=data.length>22?(data.slice(0,22)+'...'):data
      	 }else if(scrWidth>=500){
      	 	var thisData=data
      	 }
      	 return thisData
      },
	   btnDetail(data){
	   	  var points = data.substring(data.length-3,data.length)
	   	  if(points=='...'){
	   	  	return true
	   	  }else{
	   	  	return false
	   	  }
	   },
	   close () {
	      this.dialog = false
	      this.dialog2 = false
	   },
	   unSubCount(val){
  			if(val.name=='课堂日志'){
  				return this.diaryCount
  			}else if(val.name=='课堂考勤'){
  				return this.attCount
  			}
  		},
  		gotoAddress(path){
		var self=this
		setTimeout(function(){
			self.$router.push(path)
		},200)
      },
      loadMessage(){
			let that = this
			//通知公告todo
			that.axios.get(that.showNewsUrl).then(function (response) {
				that.showNews=response.data
				that.isAnnounce=false
//				console.info(that.showNews[0].schoolAnnouncementTitle)
	      	}).catch(function (error) {
	        	console.log(error);
	      	});
		},
  	}
}
	
</script>

<style scoped>

ul,li{
	list-style: none;
	margin: 0;
	padding: 0;
}
.mid-ul-content{
	margin-left: 0;
	display: block;
	padding: 0.7rem 0; 
	/*flex: 5;*/
	width: 55%;
	z-index: 160;
	position: relative;
}
.IndexCorner{
	position: absolute;
	right: 0.8rem;
	top:0.6rem;
	width: 16px;
	height: 16px;
	background: red;
	z-index: 180;
	border-radius: 50%;
	color: white;
	line-height: 16px;
}
.line-message{
	display: flex; 
	/*flex-direction: row;*/
	line-height: 1.4rem;
	/*list-style:disc circle;*/
	font-size: 0.8rem;
}
.line-message:before{
	content: '•';
	color: #373737;
	width: 5%;
	display: block;
	text-align: left;
}
.line-message span{
	color: #373737;
	display: block;
	width: 100%;
	text-align:left;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.line-message .when-prop{
	color: #a6a6a6;
	text-align: left;
	width: 25%;
}
.notice-show{
	/*height: 4rem;*/
	
	
	background-color: white;
	font-size: 0.8rem;
}
.mu-item-content{
	display: flex !important;
	align-items: center !important;
	background-color: red;
	-webkit-flex-direction: row !important;
}
.module-container{
	display: flex;
	/*justify-content: center;*/
	 /*align-items: center;*/
	 flex-wrap: wrap;
	 background: white;
	 width: 100%;
}
.module-container .item-gird{
	height: 5.8rem;
	width: 25%;
	background: white;
	/*display: flex;
	justify-content: center;
	align-items: center;
	flex-direction:column;*/
	/*border: 0.5px solid #f2f2f2;*/
	position: relative;
	min-width: 20px !important;
}
.module-container .item-gird span{
	margin-top: 0.5rem;
	padding: 0;
	color:#818181;
	line-height: 1rem !important;
}
/*.module-container section ::after{
	content: '';
	position: absolute;
	bottom: 0;
	z-index:0;
	left:0;
	width: 100%;
	border-bottom: 1px solid red;
}

.module-container section ::before{
	content: '';
	position: absolute;
	top: 0;
	z-index:0;
	right:0;
	height: 100%;
	border-left: 1px solid red;
}
*/
.module-container .item-gird::before{
	content: '';
	position: absolute;
	top: 0;
	z-index:0;
	right:0;
	height: 100%;
	border-left: 1px solid #e4e4e4;
	/*border-left: 1px solid red;*/
}
.module-container .item-gird:nth-child(4n-4)::before{
	border-left:none;
}
.module-container .item-gird::after{
	content: '';
	position: absolute;
	bottom: 0;
	z-index:0;
	left:0;
	width: 100%;
	border-bottom: 1px solid #e4e4e4;
}
.btn-sec{
	width: 100%; 
	display: flex; 
	flex-direction: column; 
	justify-content: center;
	align-items: center;
	height: 100%;
}
#index-img{
	display: block;
}
#card-img{
	margin-top: 2rem;
}
#icon-container{
	position: absolute; 
	/*background-color:#51a2e7;*/ 
	color: white;
	z-index: 106; 
	width: 100%; 
	top: 0;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	/*background-color: rgba(32,32,32,0.2);*/
}
#icon-container section,#icon-container span{
	margin: 0.5rem 0;
}
.headicon-sec {
	width: 3rem; 
	height: 3rem; 
	background-color: white; 
	border-radius: 50%; 
	overflow: hidden; 
	border:2px solid white;
	position: absolute; 
	right: 1rem; 
	top: 0.4rem;
}
.my-info{
	width:50%;
	height: 3.6rem;
	/*background-color: cornflowerblue;*/
	/*position: absolute;*/
	/*right: 1.2rem;*/
	/*bottom:0.2rem;*/
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
	flex: 1;
	position: relative;
}
.class-list{
	margin: 0.8rem; 
	height:12rem; 
	/*background: cadetblue;*/
	display: flex;
	flex-direction: row;
}
.left-nav{
	width: 25%; 
	height: 100%; 
	background: white; 
	margin-right: 0.8rem;
	flex-direction: column;
	/*justify-content: center;*/
	align-items: center;
	display: flex;
	box-shadow: 0 2px 5px 3px rgba(221,221,221,0.5);
}
.right-content{
	width: 75%;
	height: 100%;
}
.left-nav span:nth-child(1),.left-nav span:nth-child(2),.left-nav span:nth-child(3){
	display: block;
	width:80% ;
	text-align: center;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.left-nav span:nth-child(1),.left-nav span:nth-child(3){
	height:4rem;
	line-height: 4rem;
}

.left-nav span:nth-child(2){
	/*border-top:1px solid gainsboro;*/
	/*border-bottom:1px solid gainsboro;*/
	width:80% ;
	height:4rem;
}

.left-nav span:nth-child(1) a,.left-nav span:nth-child(2) a,.left-nav span:nth-child(3) a{
	display: block;
	line-height: 1.4rem;
	color:#212121 ;
	font-size: 0.8rem;
}
.left-nav span:nth-child(1) a,.left-nav span:nth-child(3) a{
	
}
.my-info:nth-child(2)::after{
	content: '';
	position: absolute;
	top: 0;
	z-index:150;
	left:0;
	height: 100%;
	/*border-right: 1px solid #e4e4e4;*/
}
.class-item{
	height: 100%; 
	width: 50%; 
	background: seashell; 
	margin-right: 0.2rem;
}
.add-style{
	border-radius: 3px;
	background-color:#fff !important;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	/*flex: 1;*/
	box-sizing: border-box;
	position: relative;
}
/*.add-style:nth-child(2n){
	border-left: 0.3rem solid #f2f2f2;
}
.add-style:nth-child(2n-1){
	
	border-right: 0.3rem solid #f2f2f2;
}*/
.slide-sec span{
	display: block;
	color:#1f1f1f ;
	/*color:#818181;*/
	font-size: 0.9rem ;
	/*width: 100%;*/
	text-align: left;
	height: 3rem;
	flex: 5;
	line-height: 3rem;
	text-indent: 9px;
	position: relative;
}
.slide-sec{
	width: 100%; 
	height: 3rem; 
	display: flex; 
	flex-direction: row; 
	text-indent: 0.2rem;
	position: relative;
	z-index: 50;
}
.clock-container{
	position: absolute !important; 
	width: 4rem !important; 
	height: 10rem !important;
	right: 0 !important; 
	display: flex; 
	justify-content: center; 
	align-items: center;
	flex-direction: column;
	z-index: 1;
}
.new-icon{

	height: 3rem;
	line-height: 3rem;
	/*width:2.6rem;*/ 
	flex: 0.6;
	text-align: center;
}
.shade-bot{
	/*background-color:rgba(244,244,244,0.2);*/ 
	/*position: absolute;*/ 
	/*bottom: 0;*/
	/*position: relative;*/
	z-index: 108; 
	height: 3rem; 
	width: 100%; 
	/*margin:0.5rem auto 0 auto;*/
	flex-direction: row;
	background-color: #2799f3;
	/*border-radius:3px;*/
/*	box-shadow: 0 2px 5px rgba(159,159,159,0.3);*/
}
.flex-center-mid{
	display: flex;
	justify-content: center;
	align-items: center;
}
.flat-act{
	width:100%;
	height: 3.2rem;
}

.swiper-box {
    width: 100%;
    height: 100%;
    /*margin: 0 auto;*/
   margin: 0;
  }
  .swiper-item {
    height: 100%;
    text-align: center;
    /*font-size: 18px ;*/
    background: #fff;
    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }
.click-ellipsis{
	color:#b7b7b7;
	background-color: rgba(5,25,89,0);
	display: block;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
}
</style>